import React, {Component} from 'react'
import {Text, View, Image, ScrollView, TouchableHighlight, StyleSheet, Modal} from 'react-native';
import { MORE_MENU } from '../common/MoreMenu'
import GlobalStyle from '../styles/GlobalStyle'
import ViewUtils from '../Utils/ViewUtils'
import { connect } from 'react-redux'
import { changeModalStatus } from '../../store/theme/actionCreators'
import CustomTheme from './CustomTheme'
import CodePush from 'react-native-code-push'

class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  onClick(tab) {
    let router = this.props.navigation
    switch(tab) {
      case MORE_MENU.Custom_Key: 
        router.navigate('Custom');
        break;
      case MORE_MENU.Sort_Key: 
        router.navigate('Sort');
        break;
      case MORE_MENU.Remove_Key:
        router.navigate('Custom', {type: 'remove'});
        break;
      case MORE_MENU.About:
        router.navigate('About'); 
        break;
      case MORE_MENU.About_Author:
        // router.navigate('CodePush')
        CodePush.sync(
          {installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: {
            appendReleaseDescription : true ,
            //更新描述的前缀。 默认为"Description"
            descriptionPrefix : "更新内容：" ,
            //强制更新按钮文字，默认为continue
            mandatoryContinueButtonLabel : "立即更新" ,
            //强制更新时的信息. 默认为"An update is available that must be installed."
            mandatoryUpdateMessage : "必须更新后才能使用" ,
            //非强制更新时，按钮文字,默认为"ignore"
            optionalIgnoreButtonLabel : '稍后' ,
            //非强制更新时，确认按钮文字. 默认为"Install"
            optionalInstallButtonLabel : '后台更新' ,
            //非强制更新时，检查到更新的消息文本
            optionalUpdateMessage : '有新版本了，是否更新？' ,
            //Alert窗口的标题
            title : '软件有新版本'
          }}
          // this.codePushStatusDidChange.bind(this),
          // this.codePushDownloadDidProgress.bind(this)
        );
        break;
      case MORE_MENU.Theme:
        // router.navigate('Theme'); 
        this.props.changeModal(true)
        break;
    }
  }

  getItem(tag, icon, name) {
    return  ViewUtils.getSettingItem(()=>this.onClick(tag), icon, name, {tintColor: this.props.themeColor}, null);
  }

  render () {
    return (
      <View style={GlobalStyle.root_container}>
        <ScrollView>
          <TouchableHighlight
            onPress={()=> this.onClick(MORE_MENU.About)}
          >
            <View style={[styles.item, {height: 90}]}> 
              <View style={{flexDirection: 'row', alignItems: 'center'}}>
                <Image source={require('../images/logo.png')} style={[{width: 40, height: 40, marginRight: 10}, {tintColor: this.props.themeColor}]} />
                <Text>Code Blog</Text>
              </View>
              <Image source={require('../images/ic_tiaozhuan.png')} style={[{
                marginRight: 10,
                height: 22,
                width: 22
              }, {tintColor: this.props.themeColor}]}/>
            </View>
          </TouchableHighlight>
          <View style={GlobalStyle.line} /> 

          {/* 标签管理 */}
          <Text style={styles.gropTitle}>标签管理</Text>

          <View style={GlobalStyle.line} /> 
          {this.getItem((MORE_MENU.Custom_Key), require('./img/ic_custom_language.png'), '自定义标签')}
          <View style={GlobalStyle.line} /> 
          {this.getItem((MORE_MENU.Sort_Key), require('./img/ic_swap_vert.png'), '标签排序')}
          <View style={GlobalStyle.line} /> 
          {this.getItem((MORE_MENU.Remove_Key), require('./img/ic_remove.png'), '标签移除')}

          <View style={GlobalStyle.line} /> 
          <Text style={styles.gropTitle}>设置</Text>
          <View style={GlobalStyle.line} />
          {this.getItem((MORE_MENU.Theme), require('./img/ic_view_quilt.png'), '主题设置')}
          <View style={GlobalStyle.line}></View>
          {this.getItem((MORE_MENU.About_Author), require('./img/ic_insert_emoticon.png'), '软件更新')}
          <View style={GlobalStyle.line} />
        </ScrollView>
        <CustomTheme showModal = {this.props.showModal} />
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  item: {
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    height: 60
  },
  gropTitle: {
    marginLeft: 10,
    marginTop: 10,
    marginBottom: 5,
    fontSize: 12,
    color: 'gray'
  }
})

const mspStata = (state) => ({
  showModal: state.theme.showModal,
  themeColor: state.theme.themeColor
})

const mapDispatch = (dispatch) => ({
  changeModal(status) {
    dispatch(changeModalStatus(status))
  }
});

export default connect(mspStata, mapDispatch)(Mine) 